var index=0;
var banner=document.getElementsByClassName("introduce_banner")[0];
var itemList=document.getElementsByClassName("introduce_item");
var pagenationList=document.querySelectorAll(".pagenation>div");
var pagenation=document.querySelector(".pagenation");
itemList[0].style.opacity=1;
pagenationList[0].style.background="green";
var up=document.getElementsByClassName("introduce_left")[0];
var next=document.getElementsByClassName("introduce_right")[0];

next.onclick=function(){
    if(index>=itemList.length-1)
    {
        index=0;
    }
    else
    {
        ++index;
    }
    for(var i=0;i<itemList.length;i++){
        itemList[i].style.opacity=0;
        pagenationList[i].style.background="white"
    }
    itemList[index].style.transition="opacity .2s ease .2s"
    itemList[index].style.opacity=1;
    pagenationList[index].style.background="green"
}
up.onclick=function(){
    // index =index <=0 ?itemList.length-1:--index;
    if(index<=0)
    {
        index=itemList.length-1;
    }
    else
    {
        --index;
    }
    for(var i=0;i<itemList.length;i++){
        itemList[i].style.opacity=0;
        pagenationList[i].style.background="white";
    }
    itemList[index].style.transition="opacity .2s ease .2s"
    itemList[index].style.opacity=1;
    pagenationList[index].style.background="green"
}

var Weixin = document.getElementsByClassName('Weixin-logo')[0];
var Erweima = document.getElementsByClassName('Weixin-ma')[0];

Weixin.onmouseover = function()
{
    Erweima.style.display = "block";
}
Weixin.onmouseout = function()
{
    Erweima.style.display = "none";
}

        // 获取到所有承载图片的li和所有承载焦点的li
        // var imgs = document.querySelectorAll('ul>li');
        var imgs = document.querySelectorAll('.imgBox>li');
        var points = document.querySelectorAll('.describe_ol>li');
        var banner = document.querySelector('.inside_content');
        var describe1=document.querySelectorAll(".describe1>li");
        var describe2=document.querySelectorAll(".describe2>li");
        var describe3=document.querySelectorAll(".describe3>li");
        // 准备一个变量，表示当前是第几张，默认是0，因为默认显示的是索引第0张
        var index = 0;
        // 书写一个切换一张的函数
        // 约定：
        // 参数为true，我们切换下一张
        // 参数为false，我们切换上一张
        // 参数为数字，我们切换到指定索引的那一张
        function changeOne(type) {
            // 1.让当前这一张消失
            imgs[index].className = ''
            points[index].className = '';
            describe1[index].className='';
            describe2[index].className='';
            describe3[index].className='';
            // 2.根据type传递来的参数，来切换index的值
                index = type;
            // 判定一下index的边界值
            // 3.让改变后的这一张显示出来
            imgs[index].className = 'active';
            points[index].className = 'active';
            describe1[index].className='active';
            describe2[index].className='active';
            describe3[index].className='active';
        }
        // 给 轮播图区域 盒子绑定点击事件
        banner.onclick = function(e) {

                // 判断点击的是焦点盒子
                if (e.target.dataset.name === 'point') {
                    // 拿到自己身上记录的索引
                    var i = e.target.dataset.i - 0;
                    // 切换某一种，调用changeOne方法传递参数为要切换的索引
                    changeOne(i);
                }
            }